<template>
  <div class="expressModel">
    <el-dialog
      :before-close="handelClose"
      :modal="false"
      :visible.sync="visible"
      width="900px"
      @close="handelClose"
    >
      <div slot="title">
        <label>选择运费模板</label>
        <span class="margin-left" style="color:gray">
          可同时选择快递发货和同城配送中的各一种</span>
      </div>
      <div class="ele-key-search">
        <h4 v-if="YFType==0">快递物流</h4>
        <h4 v-else-if="YFType==1">同城配送</h4>
        <div class="key-search">
          <el-input
            v-model="YFKeyWords"
            suffix-icon="el-icon-search"
            placeholder="输入关键字搜索分类"
          />
          <el-button type="primary" style="height: 36px;" @click="searchYFDialog">确认</el-button>
          <el-button style="height: 36px;" @click="resetYF">重置</el-button>
        </div>
      </div>
      <div class="ele-table">
        <el-table
          ref="ExpressTable"
          v-loading="dialogShow"
          height="400"
          :data="expressList"
          :header-cell-style="getRowClass"
        >
          <el-table-column label="名称" prop="name" />
          <el-table-column label="使用商品" prop="goodsCount" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="selectYFModel(scope.row)">选择模板</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="ele-footer">
        <div class="left" />
        <div class="right">
          <el-pagination
            :current-page="pages.pageIndex"
            :page-sizes="[20, 30, 40, 50]"
            :page-size="pages.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pages.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { freightTemplateList } from '@/views/shop/api/FreightTemplate'
export default {
  props: {
    visible: { type: Boolean, default: false }
  },
  data() {
    return {
      pages: { pageIndex: 1, pageSize: 20, total: 0 },
      expressList: [],
      dialogShow: false,
      YFType: 0,
      YFKeyWords: null,
      YFOptions: [],
      YFCityOptions: [],
      reChar: '',
      cloudStoreType: null
    }
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
  },
  methods: {
    /** 搜索 */
    searchYFDialog() {
      this.loadding()
    },
    /** 重置*/
    resetYF() {
      this.loadding()
    },
    /** 设置运费类型*/
    setYFType(type) {
      this.YFType = type
    },
    setReChar(data) {
      this.reChar = data
    },
    /* setType(type) {
      this.cloudStoreType = type
    },*/
    loadding() {
      this.dialogShow = true
      const data = {
        shopId: localStorage.getItem('shopId'),
        keySearch: '',
        type: this.YFType,
        page: this.pages.pageIndex,
        limit: this.pages.pageSize
      }
      if (this.YFKeyWords) {
        data.keySearch = this.YFKeyWords
      }
      freightTemplateList(data).then(response => {
        this.dialogShow = false
        this.expressList = response.data.data.data
        if (this.YFType == 0) {
          response.data.data.data.forEach(item => {
            const option = {
              value: item.id,
              label: item.name
            }
            this.YFOptions.push(option)
          })
        } else if (this.YFType === 1) {
          response.data.data.data.forEach(item => {
            const option = {
              value: item.id,
              label: item.name
            }
            this.YFCityOptions.push(option)
          })
        }
        if (this.YFType == 0) {
          this.$emit('getYFList', this.YFOptions)
        } else if (this.YFType == 1) {
          this.$emit('getYFCityList', this.YFCityOptions)
        }
        this.pages.total = response.data.data.total
        this.dialogShow = false
      }).catch(() => {
        this.expressList = []
        this.pages.total = 0
        this.dialogShow = false
      })
    },
    /**  显示条目
     *  @param size 一页显示的条目
     */
    handleSizeChange(size) {
      this.pages.pageSize = size
      this.loadding()
    },
    handelClose() {
      this.$emit('handelClose')
    },
    /**  当前页
     *  @param index 显示页
     */
    handleCurrentChange(index) {
      this.pages.pageIndex = index
    },
    /** 返回当前选择模板*/
    selectYFModel(row) {
      if (this.reChar) {
        console.log(this.reChar)
        this.$emit('getSelectYFModelByChar', row, this.reChar)
        this.handelClose()
      } else {
        this.$emit('getSelectYFModel', row)
        this.handelClose()
      }
    },
    /**  添加
     *  @param row 行数据
     */
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.expressModel {
  ::v-deep.el-dialog {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .cus-data {
      display: flex;
      .left {
        width: 150px;
        height: 150px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        flex-grow: 1;
        .form-last-item-0 {
          margin-top: -20px;
          p {
            margin: 0;
          }
        }
        .form-last-item-1 {
          margin-top: 50px;
          .el-button {
            width: 200px;
          }
        }
      }
    }
    // 添加商品的style
    .def-b {
      border-left: 4px solid rgb(55, 131, 255);
      padding-left: 10px;
    }
    .ele-key-search {
      display: flex;
      justify-content: space-between;
      .key-search {
        display: flex;
        justify-content: space-around;
        .el-input__suffix {
          height: 36px;
        }
      }
      .el-select {
        width: 120px;
      }
      .left {
        .goodsType {
          margin-left: 15px;
        }
      }
      .left,
      .right {
        display: flex;
        justify-content: flex-start;
      }
    }
    .ele-table {
      margin-top: 40px;
      .column-commodity {
        display: flex;
        align-items: flex-start;
        div:first-child {
          width: 60px;
          height: 60px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        div:last-child {
          span {
            margin-left: 20px;
          }
        }
      }
    }
    .ele-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 30px 0px;
      .left {
        .el-button {
          width: 100px;
        }
      }
    }
  }
}
</style>
